@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
<style type="text/css">
.footprintMian>div {
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.footprintMian>div:last-child {
    border-bottom: 0px;
}

.footprintMian>div>img,
.footprintMian>div .itemMone {
    height: 80px;
    width: 80px;
}

.footprintMian>div .itemMone {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: rgba(209, 0, 24, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left:0;
}
.footprintMian>div .itemMone a {
    font-size: 16px;
    color: rgba(209, 0, 24, 1);
}
.footprintMian>div>button {
    width: 100px;
    height: 30px;
    background: #ffffff;
    border: 1px solid rgba(204, 204, 204, 1);
    opacity: 1;
    border-radius: 2px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 28px;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}

.footprintMian>div>div {
    width:  690px;
    padding-left: 36px;
    padding-right: 135px;
    display: grid;
    grid-row-gap: 15px;
    align-items: center;
}
</style>
@section('content')
<div class="mainHrContent" id="hrCollect_store">
    <div class="storelistTitle" id="storelistTitle" v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 收藏的店铺
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrCollect_stores" v-cloak>
            <div class="basicInfo_title" style="margin-bottom:0px">
                <span></span>
                收藏的店铺
            </div>
            <div class="footprintMian">
                <div class="footprint_store" v-for="item in listData" @click=" window.location.href = '{{ route('home.store.store') }}?id='+item.store_id">
                    <img :src="item.store_logo">
                    <div>
                        <p class="footprint_title">
                            <span class="footprint_name">@{{item.store_name}}
                                <img v-if="item.store_quality==2" src="{{URL::asset('./img/icon/storeColloct.png')}}">
                                <img v-if="item.store_hot==2" src="{{URL::asset('./img/icon/storeHot.png')}}">
                            </span>
                        </p>
                        <p class="footprint_1">
                            <span style="color:#333333">
                                <img src="{{URL::asset('./img/icon/storeListTel.png')}}">
                                @{{item.store_call}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/storeListNote.png')}}">
                                @{{item.store_service}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/storeListEye.png')}}">
                                @{{item.store_view}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/storeListZan.png')}}">
                                @{{item.store_praise}}
                            </span>
                        </p>
                        <p>
                            @{{item.store_service_scope}}
                        </p>
                    </div>
                    <button @click.stop="deleteCollect(item.id)">
                        取消收藏
                    </button>
                </div>
            </div>
            <div class="elementPage" v-if="pageCount>0" style="margin-top: 20px;">
                <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
<style>
    .footprint_1 {
        display: flex;
        align-items: center;
    }

    .footprint_1>span {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
    }

    .footprint_1>span>img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .footprint_store>div>p:last-child {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(102, 102, 102, 1);
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrCollect_store = new Vue({
            el: '#hrCollect_stores',
            data: () => {
                return {
                    pageNumber: 1,
                    pageCount: 0,
                    listData: []
                }
            },
            created() {
                this.getList();
            },
            mounted() {},
            methods: {
                getList() {
                    let data = {
                        page: this.pageNumber,
                        type: 4
                    }
                    apiAjax("{{ route('home.user.hrCollectListApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.pageCount = res.data.total;
                            this.listData = res.data.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {});
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList();
                },
                deleteCollect(id) {
                    let data = {
                        collect_id: id,
                        type: 4
                    }
                    apiAjax("{{ route('home.user.hrCollectCancelApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                }
            }
        })
    })
</script>
@endsection